

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="1300" height="600"></canvas>
		<script type="text/javascript">
		var canvas = document.getElementById("mycanvas");
	    var ctx =canvas.getContext("2d");
	    
	    var arcArr=[
//	    [20,100,5,5,0,"cyan"],
//	    [20,100,5,10,0,"yellow"],
//	    [20,100,5,10,5,"red"]
	    ]
	    setInterval(function(){
	    	//一下子喷30个
	    	for( var i=0;i<30;i++){
	    	var vx=(Math.random()*5)+1;
	    	if(Math.random()>0.5){
	    		vx=-vx;
	    	}
	    	
	    	var vy=(Math.random()*13)+5;//小数转换成整数
	    	var r=parseInt(Math.random()*256);
	    	var g=parseInt(Math.random()*256);
	    	var b=parseInt(Math.random()*256);
	    	arcArr.push([650,300,10,vx,-vy,"rgb("+ r +","+ g +","+ b +")"])//跳球
//	    arcArr.push([20,100,10,15,2,"yellow"]);
//	    arcArr.push([20,100,10,6,7,"blue"]);
//	    arcArr.push([20,100,10,5,4,"orange"]);
//	    arcArr.push([20,100,10,2,3,"coral"])
}
	    },1500)
	    
	    setInterval(function(){
	    	ctx.fillStyle="rgba(0,205,210,0.2)";
	    	ctx.fillRect(0,0,1300,600);
	    for(var i=0; i< arcArr.length;i++){
	    	ctx.beginPath();
	    	ctx.fillStyle=arcArr[i][5];
	    	
	    	ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
	    	ctx.fill();
	    	arcArr[i][0] =arcArr[i][0]+arcArr[i][3];
	    	arcArr[i][1] =arcArr[i][1]+arcArr[i][4];
	    	arcArr[i][2] =arcArr[i][2]-Math.random()*0.1;
	    	arcArr[i][4] =arcArr[i][4] +0.5;
	    	if(arcArr[i][2]<Math.random()*2){
	    		arcArr.splice(i,1);
	    	}
	    	
	    	if(arcArr[i][1]>600-arcArr[i][2]){
	    		arcArr[i][4]=-arcArr[i][4];
	    		arcArr[i][4]=arcArr[i][4]*0.2;
	    		arcArr[i][1]=600-arcArr[i][2];
	    	}
	    	
//	    	if(arcArr[i][0]>1300-arcArr[i][2]){
//	    		arcArr[i][3]=-arcArr[i][3];
//	    		arcArr[i][0]=1300-arcArr[i][2];
//	    	}
//	    	
//	    	if(arcArr[i][0]<arcArr[i][2]){
//	    		arcArr[i][3]=-arcArr[i][3];
//	    		arcArr[i][0]=arcArr[i][2];
//	    	}
	    }
	    	
	    },16)
	    
		</script>
	</body>
</html>
